<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui-2.4.2/src/css/layui.css">
    <script type="text/javascript" src="/jquery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/layui-2.4.2/src/layui.js"></script>
</head>
<body>
<div>
    <!--<div class="layui-row">-->
    <!--<div class="layui-form">-->
    <!--<div class="layui-form-item"-->
    <!--</div>-->
    <!--</div>-->
    <div class="layui-row">
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">昵称:</label>
                <div class="layui-input-inline">
                    <input type="text" id="user_name_input" name="user_name_input" required lay-verify="required"
                           placeholder="请输入昵称"
                           autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">手机号:</label>
                <div class="layui-input-inline">
                    <input type="text" id="user_phone_input" name="user_phone_input" required lay-verify="required"
                           placeholder="请输入手机号"
                           autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">账户id:</label>
                <div class="layui-input-inline">
                    <input type="text" id="user_account_input" name="user_account_input" required lay-verify="required"
                           placeholder="请输入账户id"
                           autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">认证状态:</label>
                <div class="layui-input-inline">
                    <select name="authentication_status_select" class="authentication_status_select"
                            lay-filter="status_select">
                        <option value="">全部</option>
                        <option value="0">未认证</option>
                        <option value="1">已认证</option>
                    </select>
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户等级:</label>
                <div class="layui-input-inline">
                    <select name="level_select" class="level_select" lay-filter="status_select">
                        <option value="">全部</option>
                        <option value="0">普通会员</option>
                        <option value="1">一星会员</option>
                        <option value="2">二星会员</option>
                        <option value="3">三星会员</option>
                        <option value="4">四星会员</option>
                        <option value="5">五星会员</option>
                        <option value="6">六星会员</option>
                    </select>
                </div>
                <button class="layui-btn" id="search">搜索</button>
            </div>


        </div>
    </div>

</div>
<div class="layui-row">
    <table id="user_list_view" lay-filter="user_filter">

    </table>
</div>
<form class="layui-form" id="user_qrCode_detail" action="" style=" display:none;margin-left: 3%;margin-right: 3%">
    <div class="layui-form-item">
        <div class="layui-form-item">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="btnPicture" style="margin-left:40%;padding-left: 5px;padding-right: 5px;">点击上传用户二维码图片</button>
                <br/>
                <div class="layui-row photoUrlList" style="margin-left: 100px;margin-left: 100px;">

                </div>
                <img style="margin-left: 30%;width: 400px;height: 500px;" id="qrCodeImg">
                <input type="hidden" name="photoUrls" id= "photoUrls" class="photoUrls"/>
            </div>
        </div>
        <table id="user_qrCode_detail_view" lay-filter="user_qrCode_detail_filter">

        </table>
    </div>
</form>
</body>

<!--表格toobar模板-->
<script type="text/html" id="toolOper">
    <a class="layui-btn layui-btn-xs" lay-event="updateTransfer">转账</a>
    <a class="layui-btn layui-btn-xs" lay-event="updateUserStatus">账号</a>
    <a class="layui-btn layui-btn-xs" lay-event="updatePassWordBt">密码</a>
    <a class="layui-btn layui-btn-xs" lay-event="udpateUserRemark">备注</a>
    <a class="layui-btn layui-btn-xs" lay-event="updateUserQrCode">二维码</a>
</script>

<script>
    layui.use(['element', 'table', 'upload', 'laytpl', 'form'], function () {
        var table = layui.table;
        var upload=layui.upload;
        var encryptedMobile = '';
        var imgUrl;
        table.render({
            elem: '#user_list_view',
            url: '/user/queryList',
            page: true,
            limit: 10,
            limits: [10, 20, 50, 100],
            cols: [
                [
                    {field: 'accountId', title: '用户id', width: 120},
                    {field: 'nickName', title: '昵称', width: 120},
                    {field: 'mobile', title: '手机号', width: 120},
                    {field: 'userName2', title: '上级', width: 120},
                    {field: 'accountId2', title: '上级id', width: 120},
                    {
                        field: 'level', width: 100, title: '用户等级', templet: function (d) {
                            if (d.level === 0) return '普通会员';
                            if (d.level === 1) return '一星会员';
                            if (d.level === 2) return '二星会员';
                            if (d.level === 3) return '三星会员';
                            if (d.level === 4) return '四星会员';
                            if (d.level === 5) return '五星会员';
                            if (d.level === 6) return '六星会员';
                        }
                    },
                    {
                        field: 'authenticationStatus', width: 100, title: '认证状态', templet: function (d) {
                            if (d.authenticationStatus === 0) return '未认证';
                            if (d.authenticationStatus === 1) return '已认证';
                        }
                    },
                    {field: 'realName', title: '真实姓名', width: 100},
                    {field: 'idCard', title: '身份证号', width: 200},
                    {field: 'remake', title: '备注', width: 200},
                    // {field: 'encryptedMobile', title: 'sessionId',width:0},
                    {
                        field: 'transferAccountsStatus', title: '转账状态', width: 100, templet: function (d) {
                            if (d.transferAccountsStatus === 0) return '禁用';
                            if (d.transferAccountsStatus === 1) return '启用';
                        }
                    },
                    {
                        field: 'userStatus', title: '账号状态', width: 100, templet: function (d) {
                            if (d.userStatus === 0) return '禁用';
                            if (d.userStatus === 1) return '启用';
                        }
                    },
                    {field: 'right', align: 'center',width: 300, toolbar: '#toolOper'}
                ]
            ],
            response: {
                status: 'errorCode',
                countName: 'total',
                dataName: 'data'
            }
        });


        $("#search").on('click', function () {
            table.reload('user_list_view', {
                url: '/user/queryList',
                cache:false,
                where: {
                    userName: $('#user_name_input').val(),
                    phone: $('#user_phone_input').val(),
                    status: $('.authentication_status_select').val(),
                    level: $('.level_select').val(),
                    accountId: $('#user_account_input').val()
                }
            });
        });
        //重置密码
        table.on('tool(user_filter)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            //密码重置
            if (layEvent === 'updatePassWordBt') {
                if (window.confirm('请确认是否将' + data.nickName + '的密码重置')) {
                    $.ajax({
                        type: 'post',
                        data: {userId: data.id},
                        url: '/user/restPassWord',
                        cache: false,
                        success: function (data) {
                            if (data.success == true) {
                                alert("密码重置成功");
                            } else {
                                alert(data.mes);
                            }
                        }
                    })
                }
            }
            //转账禁用
            if (layEvent === 'updateTransfer') {
                if (window.confirm('请确认是否将' + data.nickName + data.mobile + '的转账禁用/启用')) {
                    $.ajax({
                        type: 'post',
                        data: {userId: data.id, transfer: data.transferAccountsStatus},
                        url: '/user/transfer',
                        cache: false,
                        success: function (data) {
                            if (data.success == true) {
                                alert("修改用户转账状态成功!");
                            } else {
                                alert(data.mes);
                            }
                        }
                    })
                }
                table.reload('user_list_view', {
                    url: '/user/queryList',
                    where: {
                        userName: $('#user_name_input').val(),
                        phone: $('#user_phone_input').val(),
                        status: $('.authentication_status_select').val(),
                        level: $('.level_select').val(),
                        accountId: $('#user_account_input').val()
                    }
                });
            }

            //账号禁用
            if (layEvent === 'updateUserStatus') {
                if (window.confirm('请确认是否将' + data.nickName + data.mobile + '的账号禁用/启用')) {
                    $.ajax({
                        type: 'post',
                        data: {userId: data.id, userStatus: data.userStatus},
                        url: '/user/disabled',
                        cache: false,
                        success: function (data) {
                            if (data.success == true) {
                                alert("修改用户状态成功!");
                            } else {
                                alert(data.mes);
                            }
                        }
                    })
                };
                table.reload('user_list_view', {
                    url: '/user/queryList',
                    where: {
                        userName: $('#user_name_input').val(),
                        phone: $('#user_phone_input').val(),
                        status: $('.authentication_status_select').val(),
                        level: $('.level_select').val(),
                        accountId: $('#user_account_input').val()
                    }
                });
            }

            //修改备注
            if (layEvent === 'udpateUserRemark') {
                layer.prompt({
                    formType: 2,
                    title: '请输入备注信息',
                    area: ['800px', '350px'] //自定义文本域宽高
                }, function(value, index, elem){
                    $.ajax({
                        type: 'post',
                        data: {userId: data.id,remark: value},
                        url: '/user/updateRemark',
                        cache: false,
                        success: function (data) {
                            if (data.success === true) {
                                alert("备注修改成功");
                            } else {
                                alert(data.mes);
                            }
                        }
                    }),
                        table.reload('user_list_view', {
                            url: '/user/queryList',
                            where: {
                                userName: $('#user_name_input').val(),
                                phone: $('#user_phone_input').val(),
                                status: $('.authentication_status_select').val(),
                                level: $('.level_select').val(),
                                accountId: $('#user_account_input').val()
                            }
                        });
                    layer.close(index);
                });

            }


            if (layEvent === 'updateUserQrCode') {
                // alert(data.encryptedMobile);

                encryptedMobile = data.encryptedMobile;
                $("#qrCodeImg").attr("src","");
                if(null !== data.qrcodeImgUrl && null == imgUrl){
                    // alert(data.qrcodeImgUrl);
                    $("#qrCodeImg").attr("src","http://images.honeytrip.cn"+data.qrcodeImgUrl+"?"+Math.random());
                    imgUrl=data.qrcodeImgUrl;
                }
                if(null !== imgUrl || "" !== imgUrl){
                    $("#qrCodeImg").attr("src","http://images.honeytrip.cn"+imgUrl+"?"+Math.random());
                }


                layer.open({
                    type: 1,
                    skin: 'layui-layer-demo', //样式类名
                    btn:['保存','取消'],
                    anim: 2,
                    shadeClose: true, //开启遮罩关闭
                    area: ['80%', '70%'],
                    title: "用户二维码详情",
                    content: $("#user_qrCode_detail"),
                    yes:function(index){

                        // alert(data.encryptedMobile);
                        $.ajax({
                            type: 'post',
                            data: {userId: data.id,qrCodeImgUrl: imgUrl},
                            url: '/user/updateUserQrCode',
                            cache: false,
                            success: function (data) {
                                if (data.success === true) {
                                    layer.close(index);
                                    $(".layui-laypage-btn").click();
                                } else {
                                    alert(data.mes);
                                }
                            }
                        })
                    },

//                    content:"内容"
                });


            }




        });

        //内容图片上传
        upload.render({
            elem: '#btnPicture'
            ,url: '/upload/oss/qrCodeImage'
            ,done: function(res){
                //上传完毕
                if(res.success===true){
                    var a=Math.random();
                    $("#qrCodeImg").attr("src","http://images.honeytrip.cn"+res.data+"?"+a);
                    imgUrl=res.data;
                }
            }
            ,before: function(input){
                //前置赋值
                this.data.sessionId=encryptedMobile;
            }
        });





    });

</script>

<!--<script type="text/html" id="toolOper">

    <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
    {{#  if(d.orderStatus == 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="success">完成</a>
    {{#  } }}
    {{#  if(d.orderStatus < 3&d.orderStatus > 0 ){ }}
    <a class="layui-btn layui-btn-xs" lay-event="cancel">取消</a>
    {{#  } }}
</script>-->
</html>